<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手绘折线图</title>
</head>
<body>
    <svg id="line-chart"></svg>
</body>
<script src="./node_modules/chart.xkcd/dist/chart.xkcd.min.js"></script>
<script>
    const svg = document.querySelector('#line-chart')

    new chartXkcd.Line(svg, {
        title: 'Monthly income of an indie developer',
        xLabel: 'Month',
        yLabel: '$ Dollars',
        data: {
            labels:['1', '2', '3', '4', '5', '6','7', '8', '9', '10'],
            datasets: [{
                label: 'Plan',
                data: [30, 70, 200, 300, 500 ,800, 1500, 2900, 5000, 8000],
            }, {
                label: 'Reality',
                data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
            }]
        },
        options: {}
    });
</script>
</html>